<template>
  <view class="container">
    <view class="form-item">
      <text class="label">姓氏：</text>
      <input v-model="driverSurname" placeholder="请输入姓" />
    </view>
    <view class="form-item">
      <text class="label">名字：</text>
      <input v-model="driverName" placeholder="请输入名字" />
    </view>
    <view class="form-item">
      <text class="label">性别：</text>
      <picker mode="selector" :range="genderOptions" :value="genderIndex" @change="handleGenderChange">
        <text>{{ genderOptions[genderIndex] }}</text>
      </picker>
    </view>
	<view class="form-item">
	  <text class="label">民族：</text>
	  <input v-model="driverNation" placeholder="请输入民族" />
	</view>
    <button class="submit-btn" @click="handleSubmit">提交</button>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  const globalUserInfo = getApp().globalData.userInfo;
		
  const driverSurname = ref('');
  const driverName = ref('');
  const genderOptions = ['未知', '男', '女'];
  const genderIndex = ref(0);
  const driverNation = ref('')



  driverSurname.value = globalUserInfo.driverSurname || '';
  driverName.value = globalUserInfo.driverName || '';
  genderIndex.value = globalUserInfo.driverGender || 0;
  driverNation.value = globalUserInfo.driverNation || '';

  const handleGenderChange = (event) => {
    genderIndex.value = event.detail.value;
  };

  const handleSubmit = () => {
    const data = {
      driverSurname: driverSurname.value,
      driverName: driverName.value,
      driverGender: genderIndex.value,
	  driverNation: driverNation.value
    };
    // 提交数据逻辑
    console.log(data);
  };
</script>

<style scoped>
  .container {
    padding: 20px;
  }

  .form-item {
    margin-bottom: 20px;
   /* display: flex;
    align-items: center; */
  }

  .label {
    width: 80px;
  }

  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  picker {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .submit-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
